<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>CSS &#x8bb0;&#x5f55;&#x624b;&#x518c;</title>
        <style>
/* From extension vscode.github */
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.vscode-dark img[src$=\#gh-light-mode-only],
.vscode-light img[src$=\#gh-dark-mode-only] {
	display: none;
}

/* From extension ms-toolsai.jupyter */
/* These classnames are inherited from bootstrap, but are present in most notebook renderers */

.alert {
    width: auto;
    padding: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
}
.alert > *:last-child {
    margin-bottom: 0;
}
#preview > .alert:last-child {
    /* Prevent this being set to zero by the default notebook stylesheet */
    padding-bottom: 1em;
}

.alert-success {
    /* Note there is no suitable color available, so we just copy "info" */
    background-color: var(--theme-info-background);
    color: var(--theme-info-foreground);
}
.alert-info {
    background-color: var(--theme-info-background);
    color: var(--theme-info-foreground);
}
.alert-warning {
    background-color: var(--theme-warning-background);
    color: var(--theme-warning-foreground);
}
.alert-danger {
    background-color: var(--theme-error-background);
    color: var(--theme-error-foreground);
}

</style>
        
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
<style>
            body {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif;
                font-size: 14px;
                line-height: 1.6;
            }
        </style>
        <style>
.task-list-item {
    list-style-type: none;
}

.task-list-item-checkbox {
    margin-left: -20px;
    vertical-align: middle;
    pointer-events: none;
}
</style>
        
    </head>
    <body class="vscode-body vscode-light">
        <h1 id="css-记录手册">CSS 记录手册</h1>
<h2 id="滚动条样式">滚动条样式</h2>
<pre><code class="language-css"><span class="hljs-selector-class">.scroll</span>::-webkit-scrollbar {
  <span class="hljs-comment">/*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/</span>
  <span class="hljs-attribute">width</span>: <span class="hljs-number">7px</span>;
  <span class="hljs-comment">/* height: 10px; */</span>
}
<span class="hljs-selector-class">.scroll</span>::-webkit-scrollbar-button {
  <span class="hljs-comment">/*滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置2）*/</span>
  <span class="hljs-attribute">display</span>: none;
  <span class="hljs-attribute">background</span>: <span class="hljs-number">#74d334</span>;
}
<span class="hljs-selector-class">.scroll</span>::-webkit-scrollbar-track {
  <span class="hljs-attribute">display</span>: none;
  <span class="hljs-comment">/*外层轨道，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置3）*/</span>
  <span class="hljs-attribute">background</span>: <span class="hljs-number">#ff66d5</span>;
}
<span class="hljs-selector-class">.scroll</span>::-webkit-scrollbar-track-piece {
  <span class="hljs-comment">/*内层轨道，滚动条中间部分（位置4）*/</span>
  <span class="hljs-attribute">display</span>: none;
  <span class="hljs-attribute">background</span>: <span class="hljs-number">#ff66d5</span>;
}
<span class="hljs-selector-class">.scroll</span>::-webkit-scrollbar-thumb {
  <span class="hljs-comment">/*滚动条里面可以拖动的那部分（位置5）*/</span>
  <span class="hljs-attribute">background</span>: <span class="hljs-number">#646464</span>;
  <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">4px</span>;
}
<span class="hljs-selector-class">.scroll</span>::-webkit-scrollbar-corner {
  <span class="hljs-comment">/*边角（位置6）*/</span>
  <span class="hljs-attribute">background</span>: <span class="hljs-number">#82afff</span>;
}
<span class="hljs-selector-class">.scroll</span>::-webkit-scrollbar-resizer {
  <span class="hljs-comment">/*定义右下角拖动块的样式（位置7）*/</span>
  <span class="hljs-attribute">background</span>: <span class="hljs-number">#ff0bee</span>;
}
<span class="hljs-selector-class">.scroll</span> {
  scrollbar-arrow-<span class="hljs-attribute">color</span>: <span class="hljs-number">#f4ae21</span>; <span class="hljs-comment">/**/</span> <span class="hljs-comment">/*三角箭头的颜色*/</span>
  scrollbar-face-<span class="hljs-attribute">color</span>: <span class="hljs-number">#333</span>; <span class="hljs-comment">/**/</span> <span class="hljs-comment">/*立体滚动条的颜色*/</span>
  scrollbar-<span class="hljs-number">3</span>dlight-<span class="hljs-attribute">color</span>: <span class="hljs-number">#666</span>; <span class="hljs-comment">/**/</span> <span class="hljs-comment">/*立体滚动条亮边的颜色*/</span>
  scrollbar-highlight-<span class="hljs-attribute">color</span>: <span class="hljs-number">#666</span>; <span class="hljs-comment">/**/</span> <span class="hljs-comment">/*滚动条空白部分的颜色*/</span>
  scrollbar-shadow-<span class="hljs-attribute">color</span>: <span class="hljs-number">#999</span>; <span class="hljs-comment">/**/</span> <span class="hljs-comment">/*立体滚动条阴影的颜色*/</span>
  scrollbar-darkshadow-<span class="hljs-attribute">color</span>: <span class="hljs-number">#666</span>; <span class="hljs-comment">/**/</span> <span class="hljs-comment">/*立体滚动条强阴影的颜色*/</span>
  scrollbar-track-<span class="hljs-attribute">color</span>: <span class="hljs-number">#666</span>; <span class="hljs-comment">/**/</span> <span class="hljs-comment">/*立体滚动条背景颜色*/</span>
  scrollbar-base-<span class="hljs-attribute">color</span>: <span class="hljs-number">#f8f8f8</span>; <span class="hljs-comment">/**/</span> <span class="hljs-comment">/*滚动条的基本颜色*/</span>
  <span class="hljs-attribute">scrollbar-width</span>: <span class="hljs-number">0px</span>;
}
</code></pre>
<h2 id="单词换行">单词换行</h2>
<p>word-break</p>
<h2 id="规定行数以及行超出部分">规定行数以及行超出部分</h2>
<pre><code class="language-css">  <span class="hljs-attribute">display</span>: -webkit-box;//
  <span class="hljs-attribute">overflow</span>: hidden;//
  <span class="hljs-attribute">margin</span>: <span class="hljs-number">10px</span> <span class="hljs-number">0</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">35px</span>;
  <span class="hljs-attribute">text-overflow</span>: ellipsis;//
  <span class="hljs-attribute">word-break</span>: break-all;//
  -webkit-box-orient: vertical;//
  -webkit-line-clamp: <span class="hljs-number">2</span>;//
</code></pre>
<h2 id="元素不换行">元素不换行</h2>
<p>white-space: nowrap;</p>

        
        
    </body>
    </html>